<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lmlq Mill</title>
    <link rel="stylesheet" href="./css/muse-ui.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/publiic.css">
    <link rel="stylesheet" href="./css/index_pro.css">
    <link rel="stylesheet" href="./css/case.css">
    <link rel="stylesheet" href="./css/news.css">
</head>

<body id="index">
    <div id="app">
        <!-- 头部 -->
        <header>
            <div class="head-nav">
                <mu-row>
                    <mu-col span="10" class="logo">
                        <div class="grid-cell">
                            <a href="index.html" target="index">
                                <img src="./img/logo.png" alt="logo">
                            </a>
                        </div>
                    </mu-col>
                    <mu-col span="2" class="index-menu">
                        <div class="grid-cell">
                            <mu-menu cover placement="left" :open.sync="open">
                                <mu-button icon>
                                    <img src="./img/list_icon.png" alt="">
                                </mu-button>
                                <mu-list slot="content">
                                    <mu-list-item button href="index.html">
                                        <mu-list-item-title>Home</mu-list-item-title>
                                    </mu-list-item>
                                    <mu-list-item button href="products_l.html">
                                        <mu-list-item-title>Products</mu-list-item-title>
                                    </mu-list-item>
                                    <mu-list-item button href="case_l.html">
                                        <mu-list-item-title>Case</mu-list-item-title>
                                    </mu-list-item>
                                    <mu-list-item button href="news_l.html">
                                        <mu-list-item-title>News</mu-list-item-title>
                                    </mu-list-item>
                                    <mu-list-item button href="about.html">
                                        <mu-list-item-title>About</mu-list-item-title>
                                    </mu-list-item>
                                    <mu-list-item button href="contact.html">
                                        <mu-list-item-title>Contact us</mu-list-item-title>
                                    </mu-list-item>
                                </mu-list>
                            </mu-menu>
                        </div>
                    </mu-col>
                </mu-row>
            </div>
        </header>
        <!-- banner -->
        <div class="head-banner">
            <img src="./img/banner.jpg">
            <div class="view-btn">
                <a href="products_l.html"></a>
            </div>
        </div>
        <!-- 内容 -->
        <article>
            <!-- products list -->
            <div class="products-l">
                <div class="title-box">
                    <div style="position: relative;">
                        <h2>GRINDING MILL</h2>
                        <div class="title-bg"></div>
                    </div>
                </div>
                <div class="list-box products">
                    <mu-row>
                        <mu-col span="6">
                            <div class="grid-cell pro-card hotsale_pro">
                                <a href="product_d.html">
                                    <div class="pro-img-box">
                                        <img class="pro-img" src="./img/LM.jpg">
                                        <img class="hot-icon" src="./img/hot_icon.png">
                                    </div>
                                    <div class="pro-title">
                                        <h4>LM Vertical Mill</h4>
                                    </div>
                                </a>
                            </div>
                        </mu-col>
                        <mu-col span="6">
                            <div class="grid-cell pro-card hotsale_pro">
                                <a href="product_d.html">
                                    <div class="pro-img-box">
                                        <img class="pro-img" src="./img/MTW-Z.jpg">
                                        <img class="hot-icon" src="./img/hot_icon.png">
                                    </div>
                                    <div class="pro-title">
                                        <h4>MTW-Z European Trapezium Mill</h4>
                                    </div>
                                </a>
                            </div>
                        </mu-col>

                        <mu-col span="6">
                            <div class="grid-cell pro-card hotsale_pro">
                                <a href="product_d.html">
                                    <div class="pro-img-box">
                                        <img class="pro-img" src="./img/MW.jpg">
                                    </div>
                                    <div class="pro-title">
                                        <h4>MW Series Micro<br>Powder Mill</h4>
                                    </div>
                                </a>
                            </div>
                        </mu-col>
                        <mu-col span="6">
                            <div class="grid-cell pro-card hotsale_pro">
                                <a href="product_d.html">
                                    <div class="pro-img-box">
                                        <img class="pro-img" src="./img/MTW.jpg">
                                    </div>
                                    <div class="pro-title">
                                        <h4>MTW-Z European Trapezium Mill</h4>
                                    </div>
                                </a>
                            </div>
                        </mu-col>
                        <mu-col span="6">
                            <div class="grid-cell pro-card hotsale_pro">
                                <a href="product_d.html">
                                    <div class="pro-img-box">
                                        <img class="pro-img" src="./img/RM.jpg">
                                    </div>
                                    <div class="pro-title">
                                        <h4>Raymond Mill</h4>
                                    </div>
                                </a>
                            </div>
                        </mu-col>
                        <mu-col span="6">
                            <div class="grid-cell pro-card hotsale_pro">
                                <a href="product_d.html">
                                    <div class="pro-img-box">
                                        <img class="pro-img" src="./img/MTW-Z.jpg">
                                    </div>
                                    <div class="pro-title">
                                        <h4>MTW-Z European Trapezium Mill</h4>
                                    </div>
                                </a>
                            </div>
                        </mu-col>
                    </mu-row>
                </div>
                <div class="learn-more">
                    <div class="more-pro-title">
                        <mu-row>
                            <mu-col span="2" class="logo">
                                <div class="grid-cell">
                                    <img src="./img/tab_title_icon.png">
                                </div>
                            </mu-col>
                            <mu-col span="10" class="title">
                                <div class="grid-cell">
                                    <h2>more products</h2>
                                </div>
                            </mu-col>
                        </mu-row>
                    </div>
                    <div class="tip-box">
                        <div class="tip"><a href="product_d.html">Grinding Mill</a></div>
                        <div class="tip"><a href="product_d.html">MTW-Z Trapezium Mill</a></div>
                        <div class="tip"><a href="product_d.html">5X Pendulum Roller Mill</a></div>
                        <div class="tip"><a href="product_d.html">LM Vertical Mill</a></div>
                        <div class="tip"><a href="product_d.html">MTW Trapezium Mill</a></div>
                        <div class="tip see-more"><a href="products_l.html">see more</a></div>
                        <div style="clear: both;"></div>
                    </div>
                </div>
            </div>
            <!-- cases -->
            <div class="case-l">
                <div class="title-box">
                    <div style="position: relative;">
                        <h2>CUSTOMER CASE</h2>
                        <div class="title-bg"></div>
                    </div>
                </div>
                <mu-row>
                    <mu-col span="12">
                        <div class="grid-cell case-card">
                            <a href="case_d.html">
                                <p class="case-img">
                                    <img src="./img/case01.jpg">
                                </p>
                                <div class="case-detile">
                                    <h3>48ph bituminous coal grinding line in Gansu, China</h3>
                                    <p><img src="./img/star_icon.png"><strong>Processed material:</strong> bituminous
                                        coal
                                    </p>
                                    <p><img src="./img/star_icon.png"><strong>Capacity:</strong> bituminous coal</p>
                                    <div class="corner-btn">
                                        <p>
                                            <strong>MORE</strong>
                                            <img src="./img/plus_icon.png">
                                        </p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </mu-col>
                    <mu-col span="12">
                        <div class="grid-cell case-card">
                            <a href="case_d.html">
                                <p class="case-img">
                                    <img src="./img/case02.jpg">
                                </p>
                                <div class="case-detile">
                                    <h3>Black Carbon MW Series Micro Powder Mill in Turkey</h3>
                                    <p><img src="./img/star_icon.png"><strong>Processed material:</strong> bituminous
                                        coal
                                    </p>
                                    <p><img src="./img/star_icon.png"><strong>Capacity:</strong> bituminous coal</p>
                                    <div class="corner-btn">
                                        <p>
                                            <strong>MORE</strong>
                                            <img src="./img/plus_icon.png">
                                        </p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </mu-col>
                </mu-row>
            </div>
            <!-- news -->
            <div class="news-l">
                <div class="title-box">
                    <div style="position: relative;">
                        <h2>NEWS</h2>
                        <div class="title-bg"></div>
                    </div>
                </div>
                <div class="list-box">
                    <div class="time-bg"></div>
                    <mu-list>
                        <mu-list-item avatar :ripple="false" class="under-dash">
                            <a href="news_d.html">
                                <div class="news-time">
                                    <p>02-22<br>2021</p>
                                </div>
                                <div class="title-dot">
                                    <img src="./img/title-dot.png">
                                </div>
                                <div class="news-title">
                                    <p>Mobile Jaw Crushing Plant on a Crawler Chassis</p>
                                    <p class="group">Group News</p>
                                </div>
                            </a>
                        </mu-list-item>
                        <mu-list-item avatar :ripple="false" class="under-dash">
                            <a href="news_d.html">
                                <div class="news-time">
                                    <p>02-18<br>2021</p>
                                </div>
                                <div class="title-dot">
                                    <img src="./img/title-dot.png">
                                </div>
                                <div class="news-title">
                                    <p>Liming New MB5X Series Grinding Mill for Limestone</p>
                                    <p class="group">Group News</p>
                                </div>
                            </a>
                        </mu-list-item>
                        <mu-list-item avatar :ripple="false" class="under-dash">
                            <a href="news_d.html">
                                <div class="news-time">
                                    <p>02-22<br>2021</p>
                                </div>
                                <div class="title-dot">
                                    <img src="./img/title-dot.png">
                                </div>
                                <div class="news-title">
                                    <p>How much is a large nickel slag vertical mill?</p>
                                    <p class="group">Industry News</p>
                                </div>
                            </a>
                        </mu-list-item>
                        <mu-list-item avatar :ripple="false" class="under-dash">
                            <a href="news_d.html">
                                <div class="news-time">
                                    <p>02-22<br>2014</p>
                                </div>
                                <div class="title-dot">
                                    <img src="./img/title-dot.png">
                                </div>
                                <div class="news-title">
                                    <p>Liming Heavy Industry's Sand Making Machine at Bauma China 2020</p>
                                    <p class="group">Industry News</p>
                                </div>
                            </a>
                        </mu-list-item>
                        <mu-list-item avatar :ripple="false" class="under-dash">
                            <a href="news_d.html">
                                <div class="news-time">
                                    <p>02-22<br>2021</p>
                                </div>
                                <div class="title-dot">
                                    <img src="./img/title-dot.png">
                                </div>
                                <div class="news-title">
                                    <p>Liming Heavy Industry won the Henan Province Technology Innovat</p>
                                    <p class="group">Group News</p>
                                </div>
                            </a>
                        </mu-list-item>
                        <mu-list-item avatar :ripple="false">
                            <a href="news_d.html">
                                <div class="news-time">
                                    <p>02-22<br>2014</p>
                                </div>
                                <div class="title-dot">
                                    <img src="./img/title-dot.png">
                                </div>
                                <div class="news-title">
                                    <p>What are the advantages of Liming Heavy Industry's sand and gra</p>
                                    <p class="group">Group News</p>
                                </div>
                            </a>
                        </mu-list-item>
                    </mu-list>
                </div>
            </div>
        </article>
        <!-- 底部 -->
        <footer>
            <!-- 联系我们 -->
            <div class="form-box">
                <div class="form-banner">
                    <img src="./img/form_banner.png" alt="">
                </div>
                <div class="form-inquery">
                    <mu-form id="msgForm" ref="form" :model="validateForm" class="mu-demo-form">
                        <mu-form-item :rules="nameRules" prop="name">
                            <mu-text-field v-model="validateForm.name" placeholder="Full Name" class="input1">
                            </mu-text-field><br />
                        </mu-form-item>
                        <mu-form-item :rules="telRules" prop="number">
                            <mu-text-field v-model="validateForm.number" type="number" placeholder="Call Number"
                                class="input2"></mu-text-field><br />
                        </mu-form-item>
                        <mu-form-item :rules="messageRules" prop="message" class="messa">
                            <mu-text-field v-model="validateForm.message" multi-line :rows="4"
                                placeholder="If you would like to share more information about your project, such as application field, product size, equipment purchase time…，please leave message here."
                                class="input3"></mu-text-field><br />
                        </mu-form-item>
                        <mu-form-item>
                            <mu-button @click="submit">ORDER NOW</mu-button>
                        </mu-form-item>
                    </mu-form>
                </div>
            </div>

            <div class="foot-chat">
                <a class="chat-link" href="#">
                    <img src="./img/chat_icon.png">
                    <span>Chat Online</span>
                </a>
            </div>
        </footer>
    </div>
</body>
<script src="./js/vue.min.js"></script>
<script src="./js/muse-ui.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                open: false,
                active3: 0,
                validateForm: {
                    name: '',
                    number: '',
                    message: ''
                },
                rules: [{
                    validate: (val) => !!val,
                    message: 'Cannot be empty'
                }],
                nameRules: [{
                        validate: (val) => !!val,
                        message: 'Name cannot be empty'
                    },
                    {
                        validate: (val) => val.length >= 3,
                        message: 'The length of user name is greater than 3'
                    }
                ],
                telRules: [{
                        validate: (val) => !!val,
                        message: 'Phone number cannot be empty'
                    },
                    {
                        validate: (val) => val.length >= 3 && val.length < 12,
                        message: 'Phone number format error'
                    }
                ],
                messageRules: [{
                        validate: (val) => !!val,
                        message: 'Message cannot be empty'
                    },
                    {
                        validate: (val) => val.length >= 3,
                        message: 'The length of message is greater than 3'
                    }
                ],
            }
        },
        methods: {
            submit() {
                this.$refs.form.validate().then((result) => {
                    if (result) {
                        document.querySelector('#msgForm').submit()
                    }
                });
            },
        }
    });
</script>

</html>